<template>
  <div class="base-resource-monitor">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="概览" name="overview">
        <OverviewPanel/>
      </el-tab-pane>
      <el-tab-pane label="虚拟机" name="vm">
        <VMPanel/>
      </el-tab-pane>
      <el-tab-pane label="MySQL" name="mysql">
        <MySQLPanel/>
      </el-tab-pane>
      <el-tab-pane label="MariaDB" name="mariadb">
        <MariaDBPanel/>
      </el-tab-pane>
      <el-tab-pane label="Kafka" name="kafka">
        <KafkaPanel/>
      </el-tab-pane>
      <el-tab-pane label="Redis" name="redis">
        <RedisPanel/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import OverviewPanel from './tabs/OverviewPanel.vue'
import VMPanel from './tabs/VMPanel.vue';
import MySQLPanel from './tabs/MySQLPanel.vue';
import MariaDBPanel from './tabs/MariaDBPanel.vue';
import KafkaPanel from './tabs/KafkaPanel.vue';
import RedisPanel from './tabs/RedisPanel.vue';

import {ref} from 'vue';

const activeTab = ref('overview'); // 默认激活第一个 tab
</script>

<style scoped>
.base-resource-monitor {
  padding: 20px;
}
</style>